﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" type="text/css" href="./css/start/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="./js/utils.js"></script>
</head>

<style type="text/css">
<!--
html {font-size: 12px;}
table.table-input {margin-left: auto; margin-right: auto;}
textarea {overflow: auto;}

input.required, textarea.required {
    background-image: url("./images/start-red.png");
    background-repeat: no-repeat;
    background-position: right top;
}
input.readonly, textarea.readonly {background-color: #EEEEEE;}
input.warning, textarea.warning {background-color: #FEFCD8;}
input.action, textarea.action {cursor: pointer;}

input.date {
    background-image: url("./images/Calendar.png");
    background-repeat: no-repeat;
    background-position: right;
    width: 90px;
}
input.date-rd {
    background-image: url("./images/Calendar-rd.png");
    background-repeat: no-repeat;
    background-position: right;
    width: 90px;
}

input.number, input.number-rd, input.integer, input.integer-rd {text-align: right; width: 80px;}

input.email {
    background-image: url("./images/Email.png");
    background-repeat: no-repeat;
    background-position: right;
}
input.email-rd {
    background-image: url("./images/Email-rd.png");
    background-repeat: no-repeat;
    background-position: right;
}

div.warning {
    background: #ffef8f url("./images/Information.png") no-repeat 4px 4px; color: #363636;
    text-indent: 24px; font-size: 12px; line-height: 16px;
    padding: 4px; border: 1px solid #f8da4e; position: absolute;
    display: none;
}

/*
/* validate-form 表单验证 */
form.validate-form input.action {cursor: pointer;}
form.validate-form input.readonly, form.validate-form textarea.readonly {background-color: #F2F5F7;}
form.validate-form textarea {overflow: auto;}

form.validate-form input.date {
    background-image: url(../../images/ebcm/common/calendar.gif);
    background-repeat: no-repeat;
    background-position: right;
    width: 85px;
}
form.validate-form input.date-rd {
    background-image: url(../../images/ebcm/common/calendar-rd.gif);
    background-repeat: no-repeat;
    background-position: right;
    width: 85px;
}

form.validate-form input.email {
    background-image: url(../../images/ebcm/common/email.gif);
    background-repeat: no-repeat;
    background-position: right;
}
form.validate-form input.email-rd {
    background-image: url(../../images/ebcm/common/email-rd.gif);
    background-repeat: no-repeat;
    background-position: right;
}

form.validate-form input.number {
    background-image: url(../../images/ebcm/common/number.gif);
    background-repeat: no-repeat;
    background-position: left;
    width: 80px; text-align: right;
}
form.validate-form input.number-rd {
    background-image: url(../../images/ebcm/common/number.gif);
    background-repeat: no-repeat;
    background-position: left;
    width: 80px; text-align: right;
}

form.validate-form input.integer {
    width: 80px; text-align: right;
}
form.validate-form input.integer-rd {
    width: 80px; text-align: right;
}

form.validate-form input.required, form.validate-form textarea.required {
    background-image: url(../../images/ebcm/common/required.gif);
    background-repeat: no-repeat;
    background-position: right top;
}
form.validate-form input.warning, form.validate-form textarea.warning {
    background-color: #FFF1A0;
    /*
    background-image: url(../../images/ebcm/common/warning.gif);
    background-repeat: no-repeat;
    background-position: right top;
    */
}

div.warning {
    background: #FFFFE1 url(../../images/ebcm/common/information.png) no-repeat 4px 4px;
    color: #363636; text-indent: 24px; font-size: 12px; line-height: 16px;
    padding: 4px; border: 1px solid #f8da4e; position: absolute;
    text-align: left; width: 150px; display: none;
}
*/

-->
</style>

<script type="text/javascript">
<!--
$(function() {
    
});
//-->
</script>

<body>
    <form action="" id="form" class="validate-form">
        <table class="table-input">
            <col width="20%" />
            <col width="30%" />
            <col width="20%" />
            <col width="30%" />
        
            <tr>
                <td>文本：</td>
                <td><input type="text" /></td>
                <td>必填文本：</td>
                <td><input type="text" class="required" /></td>
            </tr>
            <tr>
                <td>只读文本：</td>
                <td><input type="text" class="readonly" /></td>
                <td>动作文本：</td>
                <td><input type="text" class="action" /></td>
            </tr>
            <tr>
                <td>日期：</td>
                <td><input type="text" class="date action" /></td>
                <td>必填日期：</td>
                <td><input type="text" class="date-rd action" /></td>
            </tr>
            <tr>
                <td>数字：</td>
                <td><input type="text" class="number" /></td>
                <td>必填数字：</td>
                <td><input type="text" class="number-rd" /></td>
            </tr>
            <tr>
                <td>整数：</td>
                <td><input type="text" class="integer" /></td>
                <td>必填整数：</td>
                <td><input type="text" class="integer-rd" /></td>
            </tr>
            <tr>
                <td>email：</td>
                <td><input type="text" class="email" /></td>
                <td>必填email：</td>
                <td><input type="text" class="email-rd" /></td>
            </tr>
            <tr>
                <td>文本域：</td>
                <td><textarea></textarea></td>
            </tr>
            <tr>
                <td>必填文本域：</td>
                <td><textarea class="required"></textarea></td>
            </tr>
            <tr>
                <td>只读文本域：</td>
                <td><textarea class="readonly"></textarea></td>
            </tr>
        
        </table>
    </form>
</body>

</html>
